<template>
	<view>
		<view class="listbox">
			<view class="listview flex ac" v-for="(item,index) in listdata" :key="index">
				<view v-if="index>2" class="listindex">{{index+1}}</view>
				<view class="listitem flex ac">
					<view class="listuser">
						<image class="listuserimage" :src="item.image"></image>
						<image v-if="index==0" class="listuserlocation" src="../../static/icon/aa/rank1.png"></image>
						<image v-if="index==1" class="listuserlocation" src="../../static/icon/aa/rank2.png"></image>
						<image v-if="index==2" class="listuserlocation" src="../../static/icon/aa/rank3.png"></image>
					</view>
					<view class="listtext">{{item.name}}</view>
					<view class="listnum">6609个</view>
				</view>
				<view class="listimage">
					<image v-if="index==0" src="../../static/icon/aa/listimage1.png"></image>
					<image v-if="index==1" src="../../static/icon/aa/listimage2.png"></image>
					<image v-if="index==2" src="../../static/icon/aa/listimage3.png"></image>
				</view>

			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				listdata: [{
						image: 'https://thirdwx.qlogo.cn/mmopen/vi_32/DYAIOgq83erwxrWHt2EVHCo53yzSz7Fpiaqw6vVR6CLnzM4Qg1cfE3D0vPTlQ3e4gvsbeRZNGyYcibYCq63SPjcQ/132',
						name: '阿************ง',
						much: 6609
					},
					{
						image: 'https://duimianimg.loovee.com/MediaServerMblove/servlet/Proxy/PhotoServlet/FpvbDk3wsJbEmHkNlyGSyVIR9vf9.png',
						name: 'J**e',
						much: 4535
					},
					{
						image: 'https://duimianimg.loovee.com/MediaServerMblove/servlet/Proxy/PhotoServlet/FjMAZEIDzJE7basd3LbmOMIQuBce.png',
						name: 'w*****7',
						much: 4463
					},
					{
						image: 'https://duimianimg.loovee.com/MediaServerMblove/servlet/Proxy/PhotoServlet/FjMAZEIDzJE7basd3LbmOMIQuBce.png',
						name: '千*君',
						much: 4075
					},
					{
						image: 'https://duimianimg.loovee.com/MediaServerMblove/servlet/Proxy/PhotoServlet/FjMAZEIDzJE7basd3LbmOMIQuBce.png',
						name: '浮**淡',
						much: 3588
					},
					{
						image: 'https://duimianimg.loovee.com/MediaServerMblove/servlet/Proxy/PhotoServlet/FjMAZEIDzJE7basd3LbmOMIQuBce.png',
						name: '鹭*',
						much: 3481
					},
					{
						image: 'https://duimianimg.loovee.com/MediaServerMblove/servlet/Proxy/PhotoServlet/FjMAZEIDzJE7basd3LbmOMIQuBce.png',
						name: '天*呆',
						much: 3100
					},
					{
						image: 'https://duimianimg.loovee.com/MediaServerMblove/servlet/Proxy/PhotoServlet/FjMAZEIDzJE7basd3LbmOMIQuBce.png',
						name: 'w*****7',
						much: 4463
					},
					{
						image: 'https://duimianimg.loovee.com/MediaServerMblove/servlet/Proxy/PhotoServlet/FjMAZEIDzJE7basd3LbmOMIQuBce.png',
						name: '千*君',
						much: 4075
					},
					{
						image: 'https://duimianimg.loovee.com/MediaServerMblove/servlet/Proxy/PhotoServlet/FjMAZEIDzJE7basd3LbmOMIQuBce.png',
						name: '浮**淡',
						much: 3588
					},
					{
						image: 'https://duimianimg.loovee.com/MediaServerMblove/servlet/Proxy/PhotoServlet/FjMAZEIDzJE7basd3LbmOMIQuBce.png',
						name: '鹭*',
						much: 3481
					},
					{
						image: 'https://duimianimg.loovee.com/MediaServerMblove/servlet/Proxy/PhotoServlet/FjMAZEIDzJE7basd3LbmOMIQuBce.png',
						name: '天*呆',
						much: 3100
					},
					{
						image: 'https://duimianimg.loovee.com/MediaServerMblove/servlet/Proxy/PhotoServlet/FjMAZEIDzJE7basd3LbmOMIQuBce.png',
						name: 'w*****7',
						much: 4463
					},
					{
						image: 'https://duimianimg.loovee.com/MediaServerMblove/servlet/Proxy/PhotoServlet/FjMAZEIDzJE7basd3LbmOMIQuBce.png',
						name: '千*君',
						much: 4075
					},
					{
						image: 'https://duimianimg.loovee.com/MediaServerMblove/servlet/Proxy/PhotoServlet/FjMAZEIDzJE7basd3LbmOMIQuBce.png',
						name: '浮**淡',
						much: 3588
					},
					{
						image: 'https://duimianimg.loovee.com/MediaServerMblove/servlet/Proxy/PhotoServlet/FjMAZEIDzJE7basd3LbmOMIQuBce.png',
						name: '鹭*',
						much: 3481
					},
					{
						image: 'https://duimianimg.loovee.com/MediaServerMblove/servlet/Proxy/PhotoServlet/FjMAZEIDzJE7basd3LbmOMIQuBce.png',
						name: '天*呆',
						much: 3100
					},
					{
						image: 'https://duimianimg.loovee.com/MediaServerMblove/servlet/Proxy/PhotoServlet/FjMAZEIDzJE7basd3LbmOMIQuBce.png',
						name: 'w*****7',
						much: 4463
					},
					{
						image: 'https://duimianimg.loovee.com/MediaServerMblove/servlet/Proxy/PhotoServlet/FjMAZEIDzJE7basd3LbmOMIQuBce.png',
						name: '千*君',
						much: 4075
					},
					{
						image: 'https://duimianimg.loovee.com/MediaServerMblove/servlet/Proxy/PhotoServlet/FjMAZEIDzJE7basd3LbmOMIQuBce.png',
						name: '浮**淡',
						much: 3588
					},
					{
						image: 'https://duimianimg.loovee.com/MediaServerMblove/servlet/Proxy/PhotoServlet/FjMAZEIDzJE7basd3LbmOMIQuBce.png',
						name: '鹭*',
						much: 3481
					},
					{
						image: 'https://duimianimg.loovee.com/MediaServerMblove/servlet/Proxy/PhotoServlet/FjMAZEIDzJE7basd3LbmOMIQuBce.png',
						name: '天*呆',
						much: 3100
					},
				]
			}
		},
		methods: {}
	}
</script>

<style lang="scss">
	page {
		padding: 20rpx;
	}

	.listview {
		height: 140rpx;
		position: relative;
		margin-bottom: 20rpx;
	}

	.listindex {
		width: 50rpx;
		text-align: center;
		font-size: 30rpx;
		font-weight: bold;
		position: absolute;
		left: 17rpx;
	}

	.listitem {
		margin-left: 100rpx;
		flex: 1;
	}

	.listuser {
		width: 93rpx;
		height: 93rpx;
		position: relative;
	}

	.listuserimage {
		width: 93rpx;
		height: 93rpx;
		z-index: 3;
		border-radius: 50%;
	}

	.listuserlocation {
		width: 138rpx;
		height: 138rpx;
		position: absolute;
		top: -25rpx;
		left: -23rpx;
		z-index: 9;
	}

	.listtext {
		flex: 1;
		color: #353535;
		font-size: 28rpx;
		margin-left: 20rpx;
	}

	.listnum {
		font-size: 30rpx;
		font-weight: bold;
		color: #ff4e2e;
		margin-right: 20rpx;
	}

	.listimage {
		width: 100%;
		height: 139rpx;
		position: absolute;
		left: 0;
		top: 0;
	}

	.listimage image {
		width: 100%;
		height: 100%;
		z-index: -1;
	}
</style>